import { type Component, onMount } from "solid-js";
import getVideoSrc from "../directives/video";

// prevent typescript from removing it
false && getVideoSrc;

const Stream: Component<{
  stream: any;
  muted: boolean;
  name: string;
}> = (props) => {
  let videoRef: any;

  onMount(async () => {
    videoRef.muted = props.muted;
  });

  return (
    <div class="relative">
      <video
        autoplay
        controls={false}
        playsinline
        use:getVideoSrc={props.stream}
        class=""
        ref={videoRef}
      ></video>
      <h6 class="font-bold text-sm absolute top-0  p-4 text-white">
        {props.name}
      </h6>
    </div>
  );
};

export default Stream;
